<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器对象模型-窗口对象(BrowserObjectMode Window object)</title>
  <!-- 
  在JavaScript的浏览器对象模型（Browser Object Model, BOM）中，window对象是最重要的对象之一。它代表了浏览器的窗口，并提供了与浏览器相关的功能和属性。
  1. window对象的概述
  - 全局对象：在浏览器环境中，window是全局对象，所有在全局作用域中声明的变量和函数都是window对象的属性。
  - 包含其他对象：window对象包含其他重要的对象，如document、navigator、location、history等。

  2. window对象的属性
  - window.document：返回当前文档的document对象，允许访问和操作网页内容。
  - window.navigator：返回一个包含浏览器信息的navigator对象，包括浏览器名称、版本、操作系统等。
  - window.location：返回当前文档的URL信息，并允许修改URL，进行页面跳转。
  - window.history：提供对浏览器历史记录的访问，允许用户在历史记录中前进或后退。

  3. window对象的方法
  - alert(message)：弹出一个警告框，显示指定的消息。
  - confirm(message)：弹出一个确认框，显示指定的消息，并返回用户的选择（确定或取消）。
  - prompt(message, default)：弹出一个提示框，允许用户输入信息，返回用户输入的字符串。
  - setTimeout(function, milliseconds)：设置一个定时器，在指定的毫秒后执行指定的函数。
  - clearTimeout(timeoutId)：清除之前设置的定时器。
  - setInterval(function, milliseconds)：设置一个定时器，按照指定的毫秒间隔重复执行指定的函数。
  - clearInterval(intervalId)：清除之前设置的重复定时器。

  4. window对象的事件
  - 事件处理：window对象可以处理各种事件，如加载事件、resize事件、scroll事件等。可以使用addEventListener()方法为window对象添加事件监听器。

  5. window对象的其他特性
  - window.innerWidth和window.innerHeight：返回浏览器窗口的内部宽度和高度（不包括工具栏和滚动条）。
  - window.outerWidth和window.outerHeight：返回浏览器窗口的外部宽度和高度（包括工具栏和滚动条）。
  - window.open(url, name, specs)：打开一个新窗口或标签页，加载指定的URL。

  总结
  window对象是浏览器对象模型的核心，提供了与浏览器窗口相关的功能和属性。通过window对象，开发者可以访问和操作文档、浏览器信息、历史记录等，进行页面跳转、定时操作和事件处理等。
   -->
</head>
<body>

  <a href="https://www.baidu.com" target="_blank">百度一下</a>

  <button class="open">百度一下</button>

  <button class="close">关闭窗口</button>

  <script>
    // 0. window的环境变量角度
    // 0.1 ECMAScript规范: 全局对象 => globalThis
    // 0.2 浏览器环境: window
    // 0.3 Node.js环境: global
    
    // 1. window属性
    const width = window.innerWidth;
    const height = window.innerHeight;
    console.log(width, height);

    // 2. window方法
    // alert("hello world");
    // const result = confirm("确定要关闭吗？");
    // console.log(result);
    // const input = prompt("请输入您的姓名：");
    // console.log(input);

    // 3. window事件
    window.onload = function() {
      console.log("页面加载完成");
    }

    window.onresize = function() {
      console.log("窗口大小发生变化");
    }

    window.onscroll = function() {
      console.log("页面滚动");
    }

    // 4. window定时器
    // setTimeout(() => {
    //   console.log("定时器执行");
    // }, 2000);

    // setInterval(() => {
    //   console.log("定时器执行");
    // }, 2000);

    // 5. window对象
    // const result = window.open("https://www.baidu.com", "_blank", "width=500,height=500");//   console.log(result);

    // 6. 补充方法
    const openEl = document.querySelector(".open");
    openEl.onclick = function() {
      window.open("https://www.baidu.com", "_blank", "width=500,height=500");
    }

    const closeEl = document.querySelector(".close");
    closeEl.onclick = function() {
      window.close();
    }

    window.onhashchange = function() {
      console.log("hash值发生变化");
    }

    
  </script>
  
</body>
</html>